<template>
	<view class="content">
		<u-navbar safeAreaInsetTop placeholder fixed>
			<view class="u-nav-slot" slot="left">
				<view></view>
			</view>
			<view class="u-nav-slot color_ling text_weight" slot="center">购物车</view>
			<view class="u-nav-slot text_a color_san" slot="right" v-show="gouwcnr.length">
				<text @click="guanliflag=!guanliflag">{{guanliflag?'取消管理':"管理"}}</text>
			</view>
		</u-navbar>
		<view class="neirong">
			<view class="ffffff padding radius" v-for="item in gouwcnr" :key="item.shop_id">
				<view class="flexleft">
					<view class="margin_right2" @click="checked(item)">
						<view class="xuanzhongs" v-show="item.is_checked"></view>
						<view class="wiexuanzhongs" v-show="!item.is_checked"></view>
					</view>
					<view class="flexleft" @click="goShopInfo(item)">
						<image class="dianpuImg margin_right1" src="/static/image/mine/dianpuRed.png" mode="widthFix"></image>
						<view class="color_ling text_x margin_right1">
							{{item.shop_name}}
						</view>
						<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
					</view>
				</view>
				<view class="ffffff radius margin_top" v-for="ite in item.goods_data" :key="ite.goods_sku_unique">
					<view class="flexbetween">
						<view class="" style="width: 8%;" @click="selectitem(ite)">
							<!-- 已勾选 -->
							<view class="xuanzhongs margin_right3" v-show="ite.is_check"></view>
							<!-- 未勾选 -->
							<view class="wiexuanzhongs margin_right2" v-show="!ite.is_check"></view>
						</view>
						<view class="flextops" style="width: 91%;">
							<view class="shilitu  margin_right3" @click="goGoodsInfo(ite.goods_id)">
								<image :src="ite.sku.image_text" mode="widthFix"></image>
							</view>
							<view class="flexcolumn1" style="width: 63%;">
								<view class="text_a color_san yhxiank" @click="goGoodsInfo(ite.goods_id)">
									{{ite.goods.name}}
								</view>
								<view class="huieshs" @click="goGoodsInfo(ite.goods_id)">{{ite.sku.sku}}</view>
								<view class="flexbetween " style="width: 100%;">
									<view class="qianshu money_qian" @click="goGoodsInfo(ite.goods_id)">
										¥{{ite.sku.price}}</view>
									<view class="jiajian">
										<view class="jianhao" @click.stop="reduceBtn(ite)">
											<view class="line"></view>
										</view>
										<input type="number" class="xhtext text" style="width: 60rpx;"
											v-model="ite.cart_num" @blur="addBtn(ite,1)"
											@input="clearNoNum($event,ite)">
										<!-- <view class="xhtext">{{ite.cart_num}}</view> -->
										<view class="jiahao" @click.stop="addBtn(ite,2)"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flexcenter" v-if="!gouwcnr.length">
				<image class="placeholderBox" src="/static/placeholderimg.png" mode="widthFix"></image>
			</view>
			<!-- 相似商品 -->
			<view :style="{'marginBottom':gouwcnr.length?'100rpx':'0rpx'}" v-if="list.data.length">
				<view class="color_ling text_weight margin_top text text">猜·你·喜·欢</view>
				<view class="flexbetween flex_wrap margin_top1">
					<view class="shangpbox margin_top border1" v-for="item in list.data" :key="item.id"
						@click="goGoodsInfo(item.id)">
						<view class="shangptp">
							<image :src="item.image_text" mode="widthFix"></image>
						</view>
						<view class="padding15 ffffff baibox margin_top1">
							<view class="yihang text_a color_san">{{item.name}}</view>
							<view class="flexleft margin_top2">
								<view class="word_hh orange margin_right2">￥{{item.price}}</view>
								<view class="text_pee color_jiu">
									已拼{{item.sale_num}}件
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 固定底部 -->
			<view class="gudingdibu1 ffffff padding" v-show="gouwcnr.length">
				<view class="flexbetween">
					<view class="flexleft" @click="quanxuan">
						<!-- 已勾选 -->
						<view class="xuanzhongs margin_right3" v-show="quan"></view>
						<!-- 未勾选 -->
						<view class="wiexuanzhongs margin_right3" v-show="!quan"></view>
						<view class="titletext">全选</view>
					</view>
					<view class="btn line_orange" @click="buy" v-show="!guanliflag">
						<view class="">立即支付</view>
					</view>
					<!-- 移除购物车 -->
					<view class="btn line_orange" @click="scgwc" v-show="guanliflag">
						<view class="">移出购物车</view>
					</view>
				</view>
			</view>
		</view>
		<tabbardi :current="2"></tabbardi>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				quan: false,
				gouwcnr: [], //购物车列表内容
				allprice: 0,
				guanliflag: false,
				list: {
					data: []
				},
				page: 1,
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		onShow() {
			this.gwclb()
			this.init()
		},
		watch: {
			gouwcnr: {
				handler(newValue, oldValue) {
					let isall_check = 0
					let num = 0
					newValue.forEach(item => {
						let checked = 0
						item.goods_data.forEach(ite => {
							if (ite.is_check) {
								checked = checked + 1
								num = Number(num) + ite.cart_num * ite.sku.price
							}
						})
						if (checked == item.goods_data.length) {
							item.is_checked = true
						} else {
							item.is_checked = false
						}
						if (item.is_checked) {
							isall_check = isall_check + 1
						}
					})
					this.allprice = num
					if (isall_check == newValue.length) {
						this.quan = true
					} else {
						this.quan = false
					}
				},
				deep: true
			}
		},
		methods: {
			init(isPage, page) { //猜你喜欢
				let _this = this;
				let data = {
					page: page || 1,
					search_type: 1,
				}
				let url = "/api/goods/get_like_goods"
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			buy() {
				let num = 0
				let arr = []
				this.gouwcnr.forEach(item => {
					item.goods_data.forEach(ite => {
						if (ite.is_check) {
							arr.push(ite.id)
							num = num + 1
						}

					})
				})
				if (num == 0) {
					httpRequest.toast("请选择商品")
					return
				}
				let obj = {
					from_type: "cart", //来源：detail=从商品详情跳转过去的，cart=从购物车跳转过去的
					cart_ids: arr.join(),
					goods_num: "", //	商品数量
					goods_id: "", //	商品id
					goods_sku_unique: "", //规格unique
					is_alone: 0,
					goods_group_buying_id: ""
				}
				uni.navigateTo({
					url: "/pages_index/confirmOrder?msg=" + encodeURIComponent(JSON.stringify(obj))
				})
			},
			// 跳转商品详情
			goGoodsInfo(id) {
				uni.navigateTo({
					url: "/pages_index/goodsInfo?id=" + id
				})
			},
			goShopInfo(item) {
				let data = {
					id: item.shop_id,
					shop_name: item.shop_name,
					shop_avatar: item.shop_avatar
				}
				uni.navigateTo({
					url: "/pages_index/shopInfo?msg=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 删除购物车
			scgwc() {
				let data = []
				this.gouwcnr.forEach(item => {
					item.goods_data.forEach(ite => {
						if (ite.is_check) {
							data.push(ite.id)
						}
					})
				})
				httpRequest.request('/api/cart/delcart', 'POST', {
					cart_ids: data.join()
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.gwclb()
					}
				})
			},
			// 购物车列表接口
			gwclb() {
				httpRequest.request('/api/cart/getlist', 'GET', {
					// 传参
				}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "is_checked", false)
							item.goods_data.forEach(ite => {
								this.$set(ite, "is_check", false)
								this.$set(ite, "oldNum", ite.cart_num)
							})
						})
						this.gouwcnr = res.data
					}
				})
			},
			// 减
			reduceBtn(item) {
				if (item.cart_num != 1) {
					item.cart_num = Number(item.cart_num) - 1
					httpRequest.request('/api/cart/editcart', 'POST', {
						cart_id: item.id,
						cart_num: item.cart_num,
						type: 3
					}, false, false, true).then(res => {})
				}

			},
			// 加
			addBtn(item, type) {
				if (type == 1 && item.cart_num <= 0) {
					httpRequest.toast("至少购买一件哦！")
					return false
				}
				if (type == 1 && item.cart_num == item.oldNum) {
					return false
				}
				if (type == 2) {
					item.cart_num = Number(item.cart_num) + 1
				}
				httpRequest.request('/api/cart/editcart', 'POST', {
					cart_id: item.id,
					cart_num: item.cart_num,
					type: 3
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					this.gwclb()
				})
			},
			clearNoNum(obj, item) {
				console.log(obj);
				// obj.target.value = obj.target.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
				obj.target.value = obj.target.value.replace(/[^\d]/g, ""); //清除“数字”以外的字符
				obj.target.value = obj.target.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				obj.target.value = obj.target.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				obj.target.value = obj.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
				if (obj.target.value.indexOf(".") < 0 && obj.target.value != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					obj.target.value = parseFloat(obj.target.value);
				}
				item.cart_num = obj.target.value
			},
			checked(item) {
				item.is_checked = item.is_checked ? false : true
				item.goods_data.forEach(ite => {
					ite.is_check = item.is_checked
				})
			},
			selectitem(item) {
				item.is_check = item.is_check ? false : true
			},
			// 立即购买
			atonceBuy() {
				let data = {
					msg: [],
					type: "cart" //car购物车，detail详情
				}
				this.gouwcnr.forEach(item => {
					if (item.is_checked) {
						data.msg.push({
							goodsId: item.id,
							specType: 0,
							num: item.number
						})
					}
				})
				if (data.msg.length == 0) {
					return
				}
				uni.navigateTo({
					url: '/pages/gouwuche/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
				})

			},
			quanxuan() {
				this.quan = this.quan ? false : true
				this.gouwcnr.forEach(item => {
					item.is_checked = this.quan
					item.goods_data.forEach(ite => {
						ite.is_check = this.quan
					})
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 270rpx;
	}

	.section {
		margin-bottom: 100rpx;
	}

	.shangpbox {
		width: 48%;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
	}

	.shangptp {
		width: 100%;
		height: 338rpx;
		border-radius: 11rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.orange {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #F3271C;
	}

	.btn {
		padding: 20rpx 50rpx;
		border-radius: 120rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.line_orange {
		background-color: rgba(243, 39, 28, 1);
	}

	.neirong {
		padding: 30rpx 30rpx 100rpx;
	}

	.huieshs {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.gudingdibu1 {
		position: fixed;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		/* #ifdef APP-PLUS */
		bottom: 130rpx;
		/* #endif */
		/* #ifdef H5 */
		bottom: 130rpx;
		/* #endif */
	}

	// .jianhao {
	// 	width: 22rpx;
	// 	position: absolute;
	// 	left: 13rpx;
	// 	// height: 3.5rpx;
	// 	top: 20rpx;
	// 	height: 20rpx;

	// 	.line {
	// 		height: 3.5rpx;
	// 		width: 22rpx;
	// 		background-color: #999999;
	// 	}
	// }

	// .jiahao {
	// 	background-size: 100% 100%;
	// 	width: 21rpx;
	// 	height: 19rpx;
	// 	position: absolute;
	// 	top: 14rpx;
	// 	right: 12rpx;

	// }
	.jiahao {
		width: 38rpx;
		height: 40rpx;
		position: absolute;
		top: 0;
		right: 0;

	}

	.jianhao {
		width: 38rpx;
		height: 40rpx;
		position: absolute;
		left: 0;
		top: 0;

		.line {
			height: 3.5rpx;
			width: 22rpx;
			background-color: #999999;
		}
	}

	.xhtext {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #F3271C;
	}

	.jiajian {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 164rpx;
		height: 46rpx;
		position: relative;
		background-size: 100% 100%;
		background-image: url('/static/image/home/bujinqi.png');
	}

	.qianshu {
		color: #F3271C;
	}

	.money_qian {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.shilitu {
		width: 196rpx;
		height: 188rpx;
		border-radius: 14rpx;
        overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.yhxiank {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; //溢出内容隐藏
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		display: -webkit-box; //特别显示模式
		-webkit-line-clamp: 2; //行数
		line-clamp: 2;
		-webkit-box-orient: vertical; //盒子中内容竖直排列
	}

	.flexcolumn1 {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: column;
		height: 200rpx;
	}

	.dianpuImg {
		width: 26.62rpx;
		height: 24rpx;
	}
</style>